 <div >
	 <fieldset>
		<h3 id=pregunta class="text-center"></h3>
	</fieldset>
</div>

<form id="incluir_respuesta_pregunta">
	<fieldset>
		<br/>
		<div>
		<input type="button" value="Agregar Respuesta" id="agregarRespuesta">
		
			 <table id ="contenedor" class="table table-bordered table-striped table-hover table-responsive"> 
			</table>
		</div>

		<br/>

		<div>
			<input type="submit" value="Guardar" class="btn btn-primary"> 
			<input type="reset" value="Cancelar" class="btn btn-primary">
		</div>
	</fieldset>
</form>

<script>
	
//Recuperar el enunciado de la pregunta  
var urlPreguntas = "../dispatcher/juego/recuperarContenidoPreguntas";
urlPreguntas += "?preguntaId="+ idPreguntaSeleccionada;
$.getJSON(urlPreguntas, function(data){
		enunciadoPregunta = data.enunciado;
		$('#pregunta').text(enunciadoPregunta); 		
});

//El one sirve para llamarlo solo una vez
$(document).one("ajaxComplete", formulario);

function formulario() {

	var MaxInputs = 8; //N�mero Maximo de Campos
	var contenedor = $("#contenedor"); //ID del contenedor

	//var x = n�mero de campos existentes en el contenedor
	var x = $("#contenedor div").length + 1;
	var FieldCount = x - 1; //para el seguimiento de los campos

	$("#agregarRespuesta").click(function() {
		if (x <= MaxInputs) //max input box allowed
		{
			FieldCount++;
			//agregar campo
			$(contenedor)
					.append(
							' <tr id='+ FieldCount + '>'
							+ '<td><input type="text" name="contenido_respuesta"  placeholder="Respuesta" /></td>'//id="respuesta'+ FieldCount +'"
							+ '<td> Verdadera: <input type="checkbox" name="correcta" label="Respuesta Correcta" value="true"/> </td>'//id="c'+ FieldCount +'" 
							+ '<td><a href="#">&times;</a></td>'
							+ '</tr>');
			x++; //text box increment
		}
		return false;
	});
}

$('form').submit(function(event) {
	
	event.preventDefault();
	
	var data=[];
  	
	var counter = 0;
	// Recuperamos cada linea  de las respuestas para incluir el id de la pregunta seleccionada
	
	$('table').find('tr').each(function(){
	    var id = $(this).attr('id');
	    var row = {};
	    $(this).find('input, select, textarea').each(function(){
	    	if ($(this).attr('name') == "correcta") {
	    		row[$(this).attr('name')] = this.checked;
	    	} else {
	    		row[$(this).attr('name')] = $(this).val();
	    	}
			row["idpregunta"] = idPreguntaSeleccionada;
	    });
	    data.push(row);
	});
	
	
	$.ajax({
           type: "POST",
            url: "../dispatcher/respuesta/incluirRespuesta",
            data: JSON.stringify(data),
            beforeSend: function(xhr) {  
                xhr.setRequestHeader("Accept", "application/json");  
                xhr.setRequestHeader("Content-Type", "application/json");  
            },  
            success: function (datos) {
                   alert("Respuestas agregadas");
           },
           error : function (data, status, er) {
           	alert("error" + data + " status " +status+" er:"+er );
           }
	});

});

</script>